<template>
  <el-dialog v-model="isModalVisible" width="80%" :append-to-body="true" @close="closeModal">
    <div v-loading="loading" class="info">
      <div>
        <div class="right-color">成交信息</div>
        <el-form label-width="auto" inline>
          <el-form-item label="成交商户：" prop="name">{{ infos?.companyName }}</el-form-item>
          <el-form-item label="品类：" prop="zone">{{ infos?.categoryTypeName }}</el-form-item>
          <el-form-item label="成交商品：" prop="time">{{ infos?.productTypeName }}</el-form-item>
        </el-form>
        <el-form label-width="auto" inline>
          <el-form-item label="付费人员：" prop="name">{{ infos?.payer }}</el-form-item>
          <el-form-item label="支付积分：" prop="name">{{ infos?.paymentPoints }}</el-form-item>
          <el-form-item label="成交金额(元)：" prop="name">{{ infos?.amount }}</el-form-item>
          <el-form-item label="成交时间：" prop="time">{{ infos?.transactionTime }}</el-form-item>
        </el-form>
      </div>
      <el-divider />
      <div>
        <div class="right-color">需求信息</div>
        <el-form label-width="auto" inline>
          <el-form-item label="品类商品：" prop="name">{{ infos?.categoryTypeName }}</el-form-item>
          <el-form-item label="空间：" prop="zone">{{ infos?.spaceTypeName }}</el-form-item>
          <el-form-item label="采买时间：" prop="time">{{ infos?.purchaseTypeName }}</el-form-item>
          <el-form-item label="预算" prop="time">{{ infos?.budget + "元" }}</el-form-item>
          <el-form-item label="发布时间：" prop="time">{{ infos?.publishTime }}</el-form-item>
          <el-form-item label="业主备注：" prop="time">{{ infos?.ownerRemark }}</el-form-item>
        </el-form>
        <!--        <el-form label-width="auto" inline>
          <el-form-item label="成交金额(元)：" prop="name">{{ infos?.amount }}</el-form-item>
          <el-form-item label="成交时间：" prop="time">{{ infos?.transactionTime }}</el-form-item>
        </el-form>-->
      </div>
      <el-divider />
      <div>
        <div class="right-color">基本信息</div>
        <el-form label-width="auto" inline>
          <el-form-item label="业主姓名：" prop="name">{{ infos?.ownName }}</el-form-item>
          <el-form-item label="联系电话：" prop="zone">{{ infos?.mobile }}</el-form-item>
          <el-form-item label="房屋户型：" prop="name">{{ infos?.houseType }}</el-form-item>
          <el-form-item label="房屋面积：" prop="zone">{{ infos?.size }}㎡</el-form-item>
          <el-form-item label="房屋地址：" prop="zone">
            {{ infos?.houseAddress }}{{ infos?.neighborhood }}
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="primary" style="width: 150px" @click="clickBut('next')">下一单</el-button>
        <el-button type="primary" style="width: 150px" @click="clickBut('previous')">
          上一单
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import recordsApi from "@/api/transactionRecords/index";

const isModalVisible = ref(false);
const infos = ref();
const loading = ref(false);
const emit = defineEmits(["nextBut"]);

function openModal(row: any) {
  isModalVisible.value = true;
  getInfos(row.id);
}

async function getInfos(id: number) {
  try {
    loading.value = true;
    const res = await recordsApi.getDetail(id);
    console.log(res);
    infos.value = res.data;
    loading.value = false;
  } catch (err) {
    loading.value = false;
  }
}

function clickBut(val: any) {
  emit("nextBut", val);
}

function closeModal() {}
defineExpose({
  openModal,
});
</script>

<style lang="scss" scoped>
.info {
  .right-color {
    border-left: 4px solid #4095fe;
    padding-left: 10px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
</style>
